<template>
	<el-dialog :title="title" :model-value="visible" @close="onClose" append-to-body :width="width"
		:close-on-click-modal="false" align-center :destroy-on-close="destroy">
		<!-- body -->
		<div class="container" :style="{ height: height }">
			<slot></slot>
		</div>
		<!-- footer -->
		<template #footer v-if="isShowFooter">
			<span class="dialog-footer">
				<el-button @click="onClose">取消</el-button>
				<el-button type="primary" @click="onConfirm" :disabled="disabled" :loading="loading">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup>
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	visible: {
		type: Boolean,
		default: true
	},
	width: {
		type: [String],
		default: '500px'
	},
	height: {
		type: [String],
		default: 'auto'
	},
	isShowFooter: {
		type: Boolean,
		default: true
	},
	destroy: {
		type: Boolean,
		default: false
	},
	disabled: {
		type: Boolean,
		default: false
	},
	loading: {
		type: Boolean,
		default: false
	}
})
const emit = defineEmits(['onClose', 'onSubmit', 'update:visible'])
//定义弹框的关闭
const onClose = () => {
	emit("update:visible", false)
	// emit('onClose')
}
//定义弹框的确定
const onConfirm = () => {
	emit('onSubmit')
}
</script>
<style lang="scss" scoped>
.container {
	overflow-x: initial;
	overflow-y: auto;
	background-color: #fff;
}
</style>
